import React from 'react'
import {WingBlank, Card, WhiteSpace} from 'antd-mobile'
import {PropTypes} from 'prop-types'
import {withRouter} from 'react-router-dom'

@withRouter
export default class UserCard extends React.Component {
	static propTypes = {
		userList: PropTypes.array.isRequired
	}

	handleClick = (v) => {
		this.props.history.push(`/chat/${v._id}`);
	}

	render () {
		const Header = Card.Header;
		const Body = Card.Body;
		return (
			<WingBlank>
				<WhiteSpace />
				{
					this.props.userList.map(v => (
						v.avatar ? 
						(
						<Card 
							key={v.user}
							onClick={() => {this.handleClick(v)}}
						>
							<Header
								title={v.user}
								thumb={require(`../img/${v.avatar}.png`)}
								extra={<span>{v.title}</span>}
							></Header>
							<Body>								
								<ul>
									{v.type === 'boss' ? <li>公司：{v.company}</li> : null}
									{v.desc.split('\n').map(d => (
										<li key={d}>{d}</li>
									))}
									{v.type === 'boss' ? <li>薪资：{v.money}</li> : null}
								</ul>
							</Body>
						</Card>) : null
					))
				}
			</WingBlank>
		)
	}
}